<template>
  <div class="about">
    <h1>{{count}}</h1>
    <h2>乘以2的结果：{{ doubleCount }}</h2>
    <div>y值为：{{ y }}</div>
    <el-button @click="changeCount">Count++</el-button>
    <el-button @click="resetStore">reset</el-button>
  </div>
</template>
<script setup lang="ts">
  import {useCounterStore} from '@/stores/counter'
import { storeToRefs } from 'pinia';
  const store = useCounterStore()
  const {increment} = store
  const {count,y, doubleCount} = storeToRefs(store)
  const changeCount = () => {
    // increment()
    count.value++
    y.value--
    // store.$patch((state) => {
    //   count.value++
    //   y.value--
    // })
  }
  // store.$subscribe((mutation, state) => {
  //   console.log(mutation, state)
  //   // import { MutationType } from 'pinia'
  //   mutation.type // 'direct' | 'patch object' | 'patch function'
  //   // 与 cartStore.$id 相同
  //   mutation.storeId // 'cart'
  //   // 仅适用于 mutation.type === 'patch object'
  //   mutation.payload // 补丁对象传递给 to cartStore.$patch()

  //   // 每当它发生变化时，将整个状态持久化到本地存储
  //   localStorage.setItem('cart', JSON.stringify(state))
  // })
  const resetStore = () => {
    store.$reset()
  }
</script>

<style>
/* @media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
} */
</style>
